<template> 
  <div>
  <h2>设备使用记录</h2>   
  <div class="notification-container">   
    <ul class="notification-list">  
      <li v-for="(notification, index) in formattedNotifications" :key="index">  
        {{ notification.time }} - {{ notification.message }}  
      </li>  
    </ul>  
  </div>
  </div>     
</template>    
  
<script>    
import { ref, onMounted, onUnmounted } from 'vue';  
import { EventBus } from '@/main'; // 确保这是正确的EventBus导入路径  
  
export default {  
  name: 'itemSix',  
  setup() {  
    const notifications = ref([]); // 原始通知数组  
    const formattedNotifications = ref([]); // 格式化后的通知数组，包含时间戳 
    const loadNotifications = () => {
      const savedNotifications = localStorage.getItem('notifications');
      if (savedNotifications) {
        notifications.value = JSON.parse(savedNotifications);
        formattedNotifications.value = notifications.value.map(notification => ({
          time: new Date(notification.time).toLocaleString(),
          message: notification.message
        }));
      }
    };
    const saveNotifications = () => {
      localStorage.setItem('notifications', JSON.stringify(notifications.value));
    };
    // 格式化通知，添加时间戳  
    const formatNotification = (message) => {  
      const currentTime = new Date();
      const dateString = currentTime.toLocaleDateString(); // 获取当前日期
      const timeString = currentTime.toLocaleTimeString(); // 获取当前时间
      return { time: `${dateString} ${timeString}`, message }; 
    };  
  
    // 处理节能模式变化  
    const handleEcoModeChanged = (isEcoModeOn) => {
  const message = `节能模式已${isEcoModeOn ? '开启' : '关闭'}`;
  const formattedMessage = formatNotification(message);
  // 添加新的通知到数组
  notifications.value.push(formattedMessage);
  // 更新格式化后的通知数组
  formattedNotifications.value = [...notifications.value];
  // 保存状态
  saveNotifications();
};
  
    // 处理设备状态变化  
    const handleDeviceStatusChanged = ({ labId, deviceType, isChecked }) => {  
      const message = `实验室${labId}的${deviceType}已${isChecked ? '开启' : '关闭'}`;  
      const formattedMessage = formatNotification(message);  
      notifications.value.push(formattedMessage);  
      formattedNotifications.value = [...notifications.value]; 
      updateNotifications(formattedMessage); 
      saveNotifications();
    };  
    const updateNotifications = (newNotification) => {
  // 检查是否已经存在相同的通知
  const existingNotification = notifications.value.find(n => n.message === newNotification.message);
  if (!existingNotification) {
    notifications.value = [...notifications.value, newNotification];
    saveNotifications();
  }
};
  
    // 组件挂载时添加事件监听  
    onMounted(() => {  
      EventBus.$on('ecoModeChanged', handleEcoModeChanged);  
      EventBus.$on('deviceStatusChanged', handleDeviceStatusChanged);  
      loadNotifications();
    });  
  
    // 组件卸载时移除事件监听  
    onUnmounted(() => { 
       
      EventBus.$off('ecoModeChanged', handleEcoModeChanged);  
      EventBus.$off('deviceStatusChanged', handleDeviceStatusChanged);
      saveNotifications();  
    }); 
     
  
    // 初始时，可以假设有一些通知已经存在（如果需要的话）  
    // notifications.value = [/* 初始通知数组，需要格式化 */];  
    // formattedNotifications.value = notifications.value.map(notification => ({  
    //   time: '初始时间', // 这里应该是每个通知的实际时间  
    //   message: notification.message // 假设 notifications 数组中的对象有 message 属性  
    // }));  
  
    return {  
      formattedNotifications // 返回格式化后的通知数组供模板使用  
    };  
  }  
};    
</script>    
  
<style scoped>    
.notification-container {  
  height: 160px; /* 设置一个适合你的布局的高度 */  
  overflow-y: auto; /* 当内容超出容器高度时启用垂直滚动条 */   
  padding: 10px; /* 可选：添加内边距以提升可读性 */  
}  
  
.notification-list {  
  list-style-type: none; /* 移除默认的列表样式 */  
  padding: 0; /* 移除默认的内边距 */  
  margin: 0; /* 移除默认的外边距 */  
}  
  
.notification-list li {  
  padding: 5px 0; /* 为列表项添加一些垂直内边距 */  
}     
</style>